<template>
    <div>
        {{message}}
        <br>
        <input type="button" @click="show_my_value" value="...">
        <input type="button" @click="sayhi('jim')" value="sayhi">
        <br>
        <h3>v-bind 把属性绑到对应的元素属性</h3>
        <p v-bind:style="'color:'+ my_color" >注意元素属性的变化</p>
        <input type="button" v-on:dblclick="sayhi('jim')" value="sayhi双击">
        <br>
        <input type="button" v-on:mouseover="sayhi('jim')" value="sayhi放上面">
        <br>
        <input type="text" v-model="message"/>
        <br>
        <br>
        <div @click="increment">{{count}}</div>
    </div>
    
</template>


<script>
export default {
    
    data(){
        return {
            message:"你好，vue",
            my_value:'默认值',
            my_color:'red',
            count:0
        }
    },
    methods:{
        show_my_value:function(){
            alert('my_value'+this.my_value);
        },
        sayhi:function(name){
            alert('hi,'+ name+this.message)
        },
        increment(){
            this.count++
        }

    }
    
}
</script>

<style> 
</style>